<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags"%>
<style>
.labelPimpinan {
	margin: 10px 0;
	padding: 5px 15px 5px 5px;
	background-color: #F0F7FD;
	cursor: pointer;
}

.labelPimpinan #idTitle {
	font-size: 18px;
	font-weight: bold;
	margin: 0;
}

.labelHover {
	background-color: #FFF7FD;
}

.form-horizontal .controls {
	margin-left: 0;
}

.pimpinanView,.pimpinanHide,.gantiWarnaPimpinan {
	float: right;
}

#namaPejabat {
	font-size: 14px;
	font-weight: bold;
}

#namaJabatan {
	font-size: 10px;
}
</style>

<script>
	$.subscribe('reInitPimpinan', function(event, data) {
		var jump = 255 / $(".labelPimpinan").length;
		$(".labelPimpinan").each(
				function(index) {
					//	alert(index);
					/* pColor = (index + 1) * jump;
					if (index == 0 && index % 2 == 0)
						$(this).css("border-left-color",
								"rgb(" + pColor + "0,0)");
					if (index % 2 == 1)
						$(this).css("border-left-color",
								"rgb(100," + pColor + ",100)");
					if (index % 2 == 0)
						$(this).css("border-left-color",
								"rgb(200,200," + pColor + ")"); */
					var r = function() {
						return Math.floor(Math.random() * 256)
					};

					$(this).css("border-left-color",
							"rgb(" + r() + "," + r() + "," + r() + ")");
				});

		$(".pimpinanHide").hide();
		$(".labelPimpinan").mousemove(function(event) {
			$(this).addClass("labelHover");
		}).mouseout(function(event) {
			$(this).removeClass("labelHover");
		});

		$(".pimpinanView").click(function(event) {
			$(this).hide();
			$(this).siblings(".pimpinanHide").show();
		}).mouseout(function(event) {

		});

		$(".pimpinanHide").click(function(event) {
			$(this).hide();
			//alert(this.id);
			$("." + this.id).remove();
			$(this).siblings(".pimpinanView").show();
		});
	});

	$(function() {
		var jump = 255 / $(".labelPimpinan").length;
		$(".labelPimpinan").each(
				function(index) {
					//	alert(index);
					pColor = (index + 1) * jump;
					var r = function() {
						return Math.floor(Math.random() * 256)
					};

					$(this).css("border-left-color",
							"rgb(" + r() + "," + r() + "," + r() + ")");
					/* if (index == 0 && index % 2 == 0)
						$(this).css("border-left-color",
								"rgb(" + pColor + "0,0)");
					if (index % 2 == 1)
						$(this).css("border-left-color",
								"rgb(100," + pColor + ",100)");
					if (index % 2 == 0)
						$(this).css("border-left-color",
								"rgb(200,200," + pColor + ")"); */
				});

		$(".pimpinanHide").hide();
		$(".labelPimpinan").mousemove(function(event) {
			$(this).addClass("labelHover");
		}).mouseout(function(event) {
			$(this).removeClass("labelHover");
		});

		$(".pimpinanView").click(function(event) {
			$(this).hide();
			$(this).siblings(".pimpinanHide").show();
		}).mouseout(function(event) {

		});

		$(".pimpinanHide").click(function(event) {
			$(this).hide();
			//alert(this.id);
			$("." + this.id).remove();
			$(this).siblings(".pimpinanView").show();
		});
	});
</script>

<script>
	$
			.subscribe(
					'handleJsonResult',
					function(event, data) {
						var jabatanId = event.originalEvent.data.jabatanId;
						//alert(jabatanId);

						$
								.each(
										event.originalEvent.data.listAgenda,
										function(index, nilai) {
											//	alert(index);
											var arr = nilai.split("|");
											//	alert(arr);
											var judul = arr[0];

											var dari = arr[1].split(" ");
											var sampai = arr[2].split(" ");
											range = (parseInt(sampai[0]) - parseInt(dari[0]));
											//	alert(range);
											if (!isNaN(range)) {
												for (var i = parseInt(dari[0]); i <= parseInt(sampai[0]); i++) {
													$("#kal" + i)
															.append(
																	$(
																			"<div id=agendaId'" + index +  "' class='agenda agenda" + jabatanId +"'></div>")
																			.css(
																					"background-color",
																					$(
																							"#pimpinan"
																									+ jabatanId)
																							.css(
																									"border-left-color")));
												}
											}
										});

					});
</script>

<h4>Pimpinan IPB</h4>
<div class="container-fluid">
	<s:iterator var="list" value="listPejabat">

		<s:url id="getAgendaPimpinanUrl" action="smap/agenda/jsonmap"
			escapeAmp="false">
			<s:param name="jabatanId" value="id"></s:param>
		</s:url>

		<div
			style="border-left: 10px solid <s:property value="%{kodeWarna}" />;"
			class="labelPimpinan bs-callout bs-callout-info"
			id="pimpinan<s:property value="id" />">

			<span id="namaPejabat"><s:property value="pegawai.gelarDepan" />
				<s:property value="pegawai.nama" /> <s:property
					value="pegawai.gelarBelakang" /></span> <br> <span id="namaJabatan"><s:property
					value="strukturOrganisasi.namaJabatan" /></span>

			<sj:a href="%{getAgendaPimpinanUrl}"
				cssClass="pimpinanView  icon-eye-close"
				onSuccessTopics="handleJsonResult" dataType="json">
			</sj:a>

			<div class="pimpinanHide icon-eye-open"
				id="agenda<s:property value="%{id}" />"></div>
			<%-- <div class="gantiWarnaPimpinan icon-tint"
				id="agenda<s:property value="%{id}" />"></div> --%>
		</div>

	</s:iterator>

</div>

<s:url id="urlKelompokStruktur" action="modul/kelompokstruktur/jsonmap" />
<s:url var="urlPejabatLain"
	action="modul/agendapimpinan/page/daftarpejabatlain" />
<h4>Pejabat IPB</h4>
<div class="row-fluid">
	<s:form theme="bootstrap" cssClass="form-horizontal"
		id="pejabatLainForm">
		<div class="span8">
			<sj:select href="%{urlKelompokStruktur}" id="kelompokStruktur"
				name="kelompokStrukturId" list="listKelompokStruktur"
				emptyOption="true" headerKey="0"
				headerValue="Pilih Kelompok Struktur" />
		</div>
		<div class="span4">
			<sj:a id="pejabatLainButton" href="%{urlPejabatLain}" cssClass="btn"
				formIds="pejabatLainForm" targets="pejabatLain"
				onClickTopics="buttonClick" button="true" validate="true"
				cssStyle="float:left" onCompleteTopics="reInitPimpinan">Cari</sj:a>
		</div>
	</s:form>

</div>
<div class="container-fluid" id="pejabatLain"></div>